<template> 
  <div id="app">
    <div id="container">
      <div class="msg_box">
      编号：<input type="text" v-model="id"> 
      名称：<input type="text" v-model="name">
      <button @click="add">添加</button>
    </div>
    <h3>{{books.length}}</h3>
    <div>
      <table border="1">
        <thead>
          <tr>
            <th>编号</th>
            <th>名称</th>
            <th>时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, i) in books" :key="item.id">
            <td>
              <span v-if="!item.isExit">{{item.id}}</span>
              <input v-else type="text" v-model="item.id">
            </td>
            <td>
              <span v-if="!item.isExit">{{item.name}}</span>
              <input v-else type="text" v-model="item.name">
              </td>
            <td class="time">{{item.time}}</td>
            <td>
              <span @click="exit(i)">{{item.isExit ? "保存" : "修改"}}</span>|<span @click="del(i)">删除</span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "helloApp",
  data() {
    return {
      id: '',
      name: '',
      books: [
        {
          id: 1,
          name: "三国演义",
          time: new Date().toLocaleString(),
          isExit: false // 记录当前图书是否在编辑装太
        },
        {
          id: 2,
          name: "水浒传",
          time: new Date().toLocaleString(),
          isExit: false // 记录当前图书是否在编辑装太
        },
        {
          id: 3,
          name: "红楼梦",
          time: new Date().toLocaleString(),
          isExit: false // 记录当前图书是否在编辑装太
        },
        {
          id: 4,
          name: "西游记",
          time: new Date().toLocaleString(),
          isExit: false // 记录当前图书是否在编辑装太
        }
      ]
    }
  },
  methods: {
    // 添加图书的逻辑
    add() {
      if(this.id && this.name) {
        var book = {
          id: this.id,
          name: this.name,
          time: new Date().toLocaleString()
        }

        this.books.push(book)
      } else{
        alert('你是猪吗， 没有内容加什么')
      }
    },
    // 删除图书的逻辑
    del(i) {
      this.books.splice(i, 1)
    },
    // 修改图书的逻辑
    exit(i) {
      this.books[i].isExit = !this.books[i].isExit
    }
  }
}
</script>
<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#container{
  width: 500px;
  margin: 100px auto;
}
table{
  width: 500px;
  text-align: center;
  border-collapse: collapse;
  .time{
    width: 200px;
  }
  span{
    color: blueviolet;
    text-decoration: underline;
    padding: 0 5px;
    cursor: pointer;
    user-select: none;
  }

  input{
    width: 80px;
  }
  
}
.msg_box{
    margin-bottom: 20px;
  }
</style>
